<template>
    <el-popover v-model:visible="visible" placement="bottom-start" :width="430" trigger="click">
        <template #reference>
            <div class="result">
                <div>{{ result }}</div>
                <div>
                    <el-icon-arrowdown :class="{ 'rotate': visible }" />
                </div>
            </div>
        </template>
        <div class="container">
            <el-row>
                <el-col :span="8">
                    <el-radio-group v-model="radioValue" size="small">
                        <el-radio-button label="按城市"></el-radio-button>
                        <el-radio-button label="按省份"></el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-select v-model="selectValue" size="small" placeholder="请搜索城市" filterable
                        :filter-method="filterMethod" @change="changeSelect">
                        <el-option v-for="val in options" :key="val.id" :label="val.name" :value="val.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <template v-if="radioValue === '按城市'">
                <div class="city">
                    <!-- 字母区域 -->
                    <div class="city-item" @click="clickChat(val)" v-for="(val, key) in Object.keys(cities)" :key="key">
                        {{ val }}
                    </div>
                </div>
                <el-scrollbar max-height="300">
                    <template v-for="(val, key) in cities" :key="key">
                        <el-row style="margin-bottom: 10px;" :id="key">
                            <el-col :span="2">{{ key }}：</el-col>
                            <el-col :span="22" class="city-name">
                                <div @click="clickItem(item)" class="city-name-item" v-for="(item, index) in val"
                                    :key="item.id">
                                    <div>{{ item.name }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                </el-scrollbar>
            </template>
            <template v-else>
                <div class="province">
                    <div class="province-item" @click="clickChat(val)" v-for="(val, key) in Object.keys(provinces)"
                        :key="key">
                        {{ val }}</div>
                </div>
                <el-scrollbar max-height="300">
                    <template v-for="(val, key) in Object.values(province)" :key="key">
                        <template v-for="(item, index) in val" :key="index">
                            <el-row style="margin-bottom: 10px;" :id="item.id">
                                <el-col :span="4">{{ item.name }}：</el-col>
                                <el-col :span="20" class="province-name">
                                    <div @click="clickProvince(item1)" class="province-name-item"
                                        v-for="(item1, index1) in item.data" :key="index1">
                                        <div>{{ item1 }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </template>
                </el-scrollbar>
            </template>
        </div>
    </el-popover>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import city from '../lib/city'
import province from '../lib/province.json'
import { ICity, IProvince } from './type'

// 分发事件
let emits = defineEmits(['changeCity', 'changeProvince'])

// 最终选择的结果
let result = ref<string>('请选择')
// 控制弹出层的显示
let visible = ref<boolean>(false)
// 单选框的值 是按城市还是省份
let radioValue = ref<string>('按省份')
// 下拉框的值 搜索下啦框
let selectValue = ref<string>('')
// 下拉框显示城市的数据
let options = ref<ICity[]>([])
// 所有城市的数据
let cities = ref(city.cities)
// 所有省份的数据
let provinces = ref(province)
// 下拉框所有城市的数据
let allCity = ref<ICity[]>([])

// 点击每个城市
let clickItem = (item: ICity) => {
    // 给结果赋值
    result.value = item.name
    // 关闭弹出层
    visible.value = false
    emits('changeCity', item)
}

// 点击每个字母
let clickChat = (item: string) => {
    // 给滚动区域的row绑定一个Id
    let el = document.getElementById(item)
    // 通过原生事件去跳转位置
    if (el) el.scrollIntoView()
}

// 点击每个省份下的城市
let clickProvince = (item: string) => {
    // 给结果赋值
    result.value = item
    // 关闭弹出层
    visible.value = false
    emits('changeProvince', item)
}

// 自定义搜索过滤
let filterMethod = (val: string) => {
    let values = Object.values(cities.value).flat(2)
    if (val === '') {
        options.value = values
    } else {
        if (radioValue.value === '按城市') {
            // 中文和拼音一起过滤
            options.value = values.filter(item => {
                return item.name.includes(val) || item.spell.includes(val)
            })
        } else {
            // 中文过滤
            options.value = values.filter(item => {
                return item.name.includes(val)
            })
        }
    }
}

// 下拉框选择
let changeSelect = (val: number) => {
    let city = allCity.value.find(item => item.id == val)!
    result.value = city.name
    visible.value = false
    if (radioValue.value === '按城市') {
        emits('changeCity', city)
    } else {
        emits('changeProvince', city.name)
    }
}

onMounted(() => {
    // 获取下拉框城市的数据
    let values = Object.values(cities.value).flat(2)
    allCity.value = values
    options.value = values
})
</script>
<style lang="scss" scoped>
.result {
    display: flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
}

.rotate {
    transform: rotate(180deg);
}

svg {
    width: 1em;
    height: 1em;
    position: relative;
    top: 2px;
    margin-left: 4px;
    transition: all 0.25s linear;
}

.container {
    padding: 6px;
}

.city,
.province {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;

    &-item {
        padding: 3px 6px;
        margin-right: 8px;
        border: 1px solid #eee;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    &-item:hover {
        background-color: #409eff;
        color: #fff;
        cursor: pointer;
    }
}

.city-name,
.province-name {
    display: flex;
    flex-wrap: wrap;

    &-item {
        margin-right: 6px;
        margin-bottom: 6px;
    }

    &-item:hover {
        color: #409eff;
        cursor: pointer;
    }
}
</style>